<!-- 用户详情修改页 -->
<template>
	<view class="block">
		<view class="item">
			<view class="item_lable">
				修改头像:
			</view>
			<view class="item_avatar">
				<button class="butava" type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<u-avatar :src="userInfo.avatarUrl" shape="circle"></u-avatar></button>
			</view>
		</view>
		<view class="item">
			<view class="item_lable">
				姓名:
			</view>
			<view class="item_iphone">
				<u--input type="nickname" searchIconColor="#676767" placeholderStyle="color:#989898" color="#676767"
					v-model="userInfo.nickName" placeholder="请输入姓名" />
			</view>
		</view>
		<view class="item">
			<view class="item_lable">
				性别:
			</view>
			<view class="item_int" @click="showcomp=true">
				<u--input v-model="userInfo.sexname" :disabled='true' disabledColor='#fff' placeholder="请选择性别"
					border="none" suffixIcon="arrow-right" suffixIconStyle="color: #909399"></u--input>
			</view>
		</view>
		<view class="item">
			<view class="item_lable">
				手机号:
			</view>
			<view class="item_iphone">
				<u--input searchIconColor="#676767" placeholderStyle="color:#989898" color="#676767"
					v-model="userInfo.phone" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="item">
			<view class="item_lable">
				球龄:
			</view>
			<view class="item_int">
				<u--input v-model="userInfo.ballYear" disabledColor='#fff' placeholder="请输入球龄"
					border="none"></u--input>年
			</view>
		</view>
		<view class="item">
			<view class="item_lable">
				个人介绍:
			</view>
			<view class="item_int">
				<u--textarea v-model="userInfo.userDesc" placeholder="请输入个人介绍" autoHeight></u--textarea>
			</view>
		</view>
		<view class="bot_but">
			<view class="but" @click="submit">
				修改
			</view>
		</view>
		<view class="logout" @click="logout">
			退出登录
		</view>
		<u-picker :show="showcomp" ref="uPicker" @cancel='showcomp = false' keyName="label" :columns="columns"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script scoped>
	export default {
		props: {},
		components: {},
		data() {
			return {
				showcomp: false,
				columns: [
					[
						'男',
						'女'

					]
				],
				columnData: [],
				userInfo: {},
				temporaryUrl: ''
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {

			this.userinfo()

		},
		methods: {
			confirm(e) {
				this.userInfo.sexname = e.value[0]
				this.userInfo.sex = e.indexs[0] + 1
				this.showcomp = false
			},
			logout() {
				uni.removeStorageSync('userinfokey');
				uni.reLaunch({
					url: '/subpackage1/myhome/myhome'
				});
				uni.showToast({
					title: '退出登录成功',
				})
			},
			submit() {
				const that = this
				if (!/^1[3456789]\d{9}$/.test(this.userInfo.phone) && this.userInfo.phone) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}
				if (!/^(100|[1-9]?[0-9])$/.test(this.userInfo.ballYear) && this.userInfo.ballYear) {
				    uni.showToast({
				        title: '球龄请输入1到100之间',
				        icon: 'none'
				    });
				    return;
				}
				//只能上传本地图片不能上传https的已经上传了的图片
				if (this.temporaryUrl == this.userInfo.avatarUrl) {
					this.request()
				} else {
					this.$uploadimg(this.userInfo.avatarUrl)
						.then((url) => {
							that.userInfo.avatarUrl = url
							that.request()
						})
						.catch((err) => {
							console.error(err);
						});
				}

			},
			// 发送保存用户信息接口
			request() {
				const data = {
					nickName: this.userInfo.nickName,
					phone: this.userInfo.phone,
					avatarUrl: this.userInfo.avatarUrl,
					sex: this.userInfo.sex,
					userDesc: this.userInfo.userDesc,
					ballYear: this.userInfo.ballYear,
					
				}
				this.$request(`/mine/member/edit`, 'post', data).then(
					res => {
						const that = this
						uni.getStorage({
							key: 'userinfokey',
							success: function(res) {
								const user = {
									...res.data,
									...data
								}
								uni.setStorage({
									key: 'userinfokey',
									data: user,
									success: function() {
										console.log('存储用户信息成功');
									},
								});
							}
						});
						uni.reLaunch({
							url: '/subpackage1/myhome/myhome'
						});
						uni.showToast({
							title: '修改成功',
						})
						this.userInfo = {}
					})
			},

			// 用户信息请求
			userinfo() {
				const that = this
				this.$request(`/mine/memberInfo`, 'get')
					.then(
						res => {
							that.temporaryUrl=res.data.data.avatarUrl
							that.userInfo = res.data.data
							that.userInfo.sexname=res.data.data.sex==1?'男':(res.data.data.sex==2?'女':'')
						})

			},
			// 图片选择回调临时地址
			chooseavatar(e) {
				this.userInfo.avatarUrl = e.detail.avatarUrl
			},

		}
	}
</script>

<style scoped lang="scss">
	.block {
		padding: 20px;
		height: 100vh;

		button {
			border: 0px solid #000;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			border: none;
			margin: 5px 0;
			min-height: 50px;
			border-radius: 5px;
			// border-bottom: 1px solid #a7a7a7;
			background-color: #ffffff;
			box-shadow: 3px 5px 5px -5px rgba(0, 0, 0, 0.75);

			.item_lable {
				font-size: 14px;
				color: #676767;
				width: 25%;
			}

			.item_avatar {
				display: flex;
				align-items: center;
			}

			.item_iphone {
				display: flex;
				align-items: center;
				width: 75%;
			}

			.item_int {
				display: flex;
				align-items: center;
				width: 75%;
				padding-left: 13px;
			}

			::v-deep .u-textarea {
				padding: 10px 0 !important;
			}

			.butava {
				height: 40px;
				width: 40px;
				padding: 0;
				border-radius: 20px;
			}

		}

		.bot_but {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.but {
				text-align: center;
				height: 40px;
				line-height: 40px;
				color: #fff;
				border-radius: 30px;
				width: 100%;
				margin-top: 10px;
				background-color: #de3600;
				box-shadow: 3px 5px 5px -5px rgba(0, 0, 0, 0.75);
			}

		}

		.logout {
			margin-top: 10px;
			font-size: 13px;
			color: #de3600;
			width: 100%;
			text-align: center;
		}

		::v-deep .u-input {
			color: #747474;
			background-color: #ffffff !important;
		}
	}
</style>